<!doctype html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>中国银行深圳分行|尊享积分</title>
    {{--<link rel="stylesheet" href="/chinabank/app/css/app.css?time={{time()}}">--}}
    <link rel="stylesheet" href="/chinabank/app/css/app.css?time=">
</head>
<body class="page-exchange">
<div id="app">

    <div class="head">
        <img class="block" src="/chinabank/app/images/static/index-head.png" alt="">
    </div>
    <form action="exchangeAction" method="post" v-on:submit="checkExchangeData">
        {{ csrf_field() }}
        <div class="container">

            <div class="box hide">
                <div class="input">
                    <div class="icon icon-card"></div>
                    <input type="text" placeholder="卡号">
                </div>
            </div>

            <div class="box hide">
                <div class="input">
                    <div class="icon icon-pass"></div>
                    <input type="text" placeholder="密码">
                </div>
            </div>


            <div class="box">
                <div class="goods">
                    <div class="g-title">{{$goods->type}} <span>( * 周末及节假日取片时间会有延迟，具体取片时间以门店为主)</span></div>

                    <div class="g-detail">
                        <div class="g-content">

                            <div class="g-img">
                                <p class="flex1"></p>
                                <img  src="/{{$goods->thumb_img}}">
                                <p class="flex1"></p>
                            </div>
                            <div class="g-desc">
                                <p class="t">{{$goods->name}}<span>（{{$goods->note}}、{{$goods->price}}积分）</span></p>
                                @foreach($goods->content as $key => $con)
                                <p class="b">{{$key+1}}、{{$con}}</p>
                                @endforeach
                            </div>
                        </div>
                        <div class="g-btn"><a href="goods?id={{$goods->id}}" v-on:click="cacheFrom">查看详情</a></div>
                    </div>
                </div>
            </div>

            <div class="box">
                <div class="input">
                    <div class="icon icon-time"></div>
                    <input name="bookDate" class="select" placeholder="请选择日期" readonly v-on:click="showDateTime=true;showModel=true;" v-model="form.datetime">
                </div>
            </div>

            <div class="box">
                <div class="input">
                    <div class="icon icon-address"></div>
                    <input type="text" class="select" placeholder="请选择门店" readonly v-on:click="showAddress=true;showModel=true;" v-model="shop.name">
                    <input type="hidden" name="shop" v-model="shop.id">
                </div>
            </div>

            <div class="box">
                <div class="input">
                    <div class="icon icon-user"></div>
                    <input name="name" type="text" placeholder="姓名" v-model="form.name">
                </div>
            </div>

            <div class="box">
                <div class="input">
                    <div class="icon icon-mobile"></div>
                    <input name="mobile" type="tel" placeholder="手机" v-model="form.mobile">
                </div>
            </div>

            <div class="box">
                <div class="input">
                    <div class="icon icon-code"></div>
                    <input name="mobileCode" type="tel" placeholder="验证码" v-model="form.mobileCode">
                    <div class="codebtn">
                        <span v-bind:class="[validMobile.time == 60?'valid':'invalid']" v-on:click="sendMobileCode" v-text="validMobile.text"></span>
                    </div>
                </div>
            </div>

            <div class="box">
                <div class="input">
                    <div class="icon icon-note"></div>
                    <input name="note" type="text" placeholder="备注" v-model="form.note">
                </div>
            </div>

            <div class="box rule">
                <p>如需帮助，可拨打客服电话<a class="big" href="tel:4000072201">4000072201</a></p>
                <p class="big">预约须知：</p>
                <p class="big">01 若门店预约满额，我们的客服将以电话形式与您再次确认可预约时间，请注意查收来电；</p>
                <p>02 若需要修改拍摄时间，请提前3天联系我们的客服；</p>
                <p>03 订单确认后，如未能在确定时间内拍摄的，将一律视作已拍摄完成，不可再补拍；</p>
                <p>04 门店化妆品采用温和无刺激产品，我们仍建议敏感肌肤使用自己的化妆品；</p>
                <p>05 周末为拍摄时间高峰期，如预约周末时间，请提前3-5天以上预约。</p>
            </div>
        </div>

        <div class="btns">
            <a class="btn" href="tel:4000072201">联系客服</a>
            <div></div>
            <button class="btn">提交订单</button>
        </div>

    </form>


    {{--弹窗--}}
    <div class="float-container" v-show="showModel" style="display: none;">
        {{--黑色遮罩--}}
        <div class="empty" v-on:click="closeModel"></div>

        {{--弹窗内容--}}
        <div class="float-content">

            {{--门店选择--}}
            <div class="address-box" v-show="showAddress">
                <p class="title">门店选择</p>

                    <div v-for="address in addressList" class="add-list" v-on:click="choiceShop(address)">
                        <div class="check-btn">
                            <p></p>
                            <span v-bind:class="[address.id == shop.id? 'active':'']"></span>
                            <p></p>
                        </div>

                        <div class="detail-box">
                            <p class="add-name">
                                <span v-text="address.name"></span>
                                <span v-show="address.distance > 0" v-text="'距此'+address.distance+'公里'"></span>
                            </p>
                            <p v-text="address.detail"></p>
                        </div>
                    </div>

                {{--<div class="sure-btn" v-on:click="setAddress">确定</div>--}}
            </div>


            {{--选择时间与日期--}}
            <div class="date-time-box" v-show="showDateTime">
                <div class="date-box">
                    <p class="title">门店日期</p>
                    <div class="nav">
                        <p class="left" v-on:click="lastMonth"></p>
                        <p class="middle" v-text="calendar.year + '年' + calendar.month + '月'"></p>
                        <p class="right" v-on:click="nextMonth"></p>
                    </div>

                    <table class="calendar">
                        <tr>
                            <th>日</th>
                            <th>一</th>
                            <th>二</th>
                            <th>三</th>
                            <th>四</th>
                            <th>五</th>
                            <th>六</th>
                        </tr>
                        <tr v-for="week in calendar.date">
                            <td v-for="d in week" v-on:click="choiceDate(d.date)" v-text="d.date" v-bind:class="[d.date == calendar.tempDay && calendar.tempMonth == calendar.month && calendar.year == calendar.tempYear?'activate':'',d.timestamp>=calendar.currentTimestamp?'':'invalid']"></td>
                        </tr>
                    </table>
                </div>

                <div class="line"><p></p></div>

                <div class="time-box">
                    <p class="title">选择时间</p>
                    <div class="time-container">
                        <div class="stage">
                            <p v-for="(name,index) in hours.stageName" v-on:click="hours.currentStage = index" v-bind:class="[index==hours.currentStage?'active':'']" v-text="name"></p>
                        </div>
                        <div class="hours">

                            <div v-for="hour in hours.stage[hours.currentStage]" v-bind:class="hours.currentHour == hour ?'active':''">
                                <p v-text="hour + ':00'" v-on:click="hours.currentHour = hour"></p>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="sure-btn" v-on:click="setDateTime">确定</div>
            </div>

        </div>
    </div>


    {{--底部菜单--}}
    <div class="menu-container">
        <a class="menu active" >
            <img src="/chinabank/app/images/static/menu1-active.png" alt="">
            <p>预约</p>
        </a>
        <a class="menu" href="orders">
            <img src="/chinabank/app/images/static/menu2.png" alt="">
            <p>订单</p>
        </a>
    </div>


    {{--提示信息--}}
    <div class="dialog" v-show="dialog.show" style="display: none;">
        <div class="flex1"></div>
        <div class="msg-box">
            <p class="msg" v-text="dialog.msg"></p>
            <p class="btn">
                <em class="flex1" v-show="dialog.type == 'confirm'"></em>
                <span class="no" v-show="dialog.type == 'confirm'" v-on:click="dialogCallback(false)">取消</span>
                <em class="flex1" v-show="dialog.type == 'confirm'"></em>
                <em class="flex1"></em>
                <span class="yes" v-on:click="dialogCallback(true)">确定</span>
                <em class="flex1"></em>
            </p>
        </div>
        <div class="flex1"></div>
    </div>
</div>
</body>
</html>

<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js" type="text/javascript" charset="utf-8"></script>
<script>
    var shopAddress= {!! $shopAddress !!};
    var APP_PAGE = "exchange";
    wx.config({!! $wxconfig !!});
</script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="/chinabank/app/js/app.js?v={{time()}}"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.1.3/dist/jquery.min.js"></script>

